<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />

	<link rel="stylesheet" type="text/css" href="../../css/index.css" />
	<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
	<!-- <link rel="stylesheet" type="text/css" href="../../css/idangerous.swiper.css"> -->

	<style>
		html,
		body {
			width: 100%;
			min-height: 100%;
			background: #f0eff5;
		}

		.h20 {
			height: 0.5rem;
		}

		#slider1 {
		background: #fff;
		width: 100%;
    padding-bottom: 20px;
		}
		#slider1 .swiper-slide {
			-webkit-transform: scale(0.8);
			transform: scale(0.8);
			transition: all 0.4s ease;
			-webkit-transition: all 0.4s ease;
			height: 10rem;
			width: 100%;
		}
		#slider1 .swiper-slide-active {
			width: 100%;
			top: 0px;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
		.index_grid.aui-grid .grid-img {
			width: 50%;
			margin: auto;
		}
		.index_grid.aui-grid .aui-col-xs-3 {
			padding: 0.5rem 0;
		}
		.zxzx .aui-list-item-title {
			color: #333;
			line-height: 1.2rem;
			font-size: 0.8rem;
		}
		.zxzx .aui-info-item {
				color: #999;
				font-size: 0.7rem;
		}
		.zxzx .aui-list-item-media {
			width: 6.5rem;
		}
		.zxzx .last-item .aui-list-item-title {
			color: #666;
			font-size: 0.7rem
		}
		.zxzx .last-item_video {
			position: relative;
			padding: 0;
		}
		.zxzx .last-item_video .mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: rgba(0, 0, 0, 0.1);
		}
		.zxzx .last-item_video .mask_mid {
			width: 4rem;
			height: 4rem;
			padding: 1rem;
			position: absolute;
			left:0;
			right:0;
			top: 0;
			bottom: 0;
			margin: auto;
			border-radius: 50%;
			background: rgba(0,0,0,0.3);
			text-align: center;
		}
		.zxzx .last-item_video .mask_mid img {
			height: 100%;
			width: auto;
			margin-left: auto;
			margin-right: 0;
		}
		.zxzx .last-item_video .mask_bot {
			color: #fff;
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 1rem;
		}
		.zxzx .last-item_video .mask_left {
			float: left;
			color: #fff;
			font-size: 0.7rem;
		}
		.zxzx .last-item_video .mask_left img {
			width: 0.7rem;
			display: inline-block;
			vertical-align: middle;
			margin-top: -0.25rem;
			margin-right: 0.25rem;
		}
		.zxzx .last-item_video .mask_right {
			float: right;
			color: #fff;
			font-size: 0.7rem;
		}
		.itemIco {
			width: 100%;
			height: 4rem;
		}

		.zxzx .aui-media-list-item-inner .aui-list-item-inner {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}

		.vedio .aui-list-item-inner .aui-list-item-title,.vedio .aui-list-item-inner .aui-info-item {
			color: #333;
			margin: 0.25rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<section class="aui-refresh-content">
		    <div class="aui-content">
		        <div id="demo">
		<div class="swiper-container"  id="slider1">

		  <div class="swiper-wrapper" v-if="newsList.length > 0">
				<div class="swiper-slide" v-for="(item, index) in newsList" :key="index" v-if="item.Newsimages && item.Newsimages != '' && index < 3" :style="'background: url('+item.Newsimages+') center/cover no-repeat'"></div>
		  </div>


		  <div class="swiper-wrapper" v-else>
		    <div class="swiper-slide" style="background: url(../../image/banner1.jpg)"></div>
			  <div class="swiper-slide" style="background: url(../../image/banner1.jpg)"></div>
				<div class="swiper-slide" style="background: url(../../image/banner1.jpg)"></div>
		  </div>
		</div>
		<section class="aui-grid index_grid">

		    <div class="aui-row">
		        <div class="aui-col-xs-3" @click="openXS()">
								<div class="grid-img">
									<img src="../../image/firstpage/xs@3x.png" alt="">
								</div>
		            <div class="aui-grid-label">学术</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openWX()">
							<div class="grid-img">
								<img src="../../image/firstpage/wx@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">文献</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openPage('cx', '创新')">
							<div class="grid-img">
								<img src="../../image/firstpage/cx@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">创新</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openSJ()">
							<div class="grid-img">
								<img src="../../image/firstpage/sj@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">社交</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openPage('zc', '政策')">
							<div class="grid-img">
								<img src="../../image/firstpage/zc@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">政策</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openPage('jk', '健康')">
							<div class="grid-img">
								<img src="../../image/firstpage/jk@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">健康</div>
		        </div>
		        <div class="aui-col-xs-3" @click="openPage('hd', '活动')">
							<div class="grid-img">
								<img src="../../image/firstpage/hd@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">活动</div>
		        </div>
		        <div class="aui-col-xs-3" onclick="clickMore()">
							<div class="grid-img">
								<img src="../../image/firstpage/gd@3x.png" alt="">
							</div>
		            <div class="aui-grid-label">更多</div>
		        </div>
		    </div>
		</section>
		<div class="h20"></div>
		<div class="section02 zxzx" tapmode="presshover">
			<div class="aui-content">
				<div class="font-title">最新资讯</div>
				<div class="aui-content">
				  <ul class="aui-list aui-media-list">
						 <li class="aui-list-item" v-for="item in newsList" @click="openPage('detail_xc', '详情', item.id)">
								 <div class="aui-media-list-item-inner">
										 <div class="aui-list-item-media">
								 				<!-- <img :src="item.Newsimages" alt="" v-if="item.Newsimages && item.Newsimages != ''">
								 				<img src="../../image/banner1.jpg" alt="" v-else> -->
												<div v-if="item.Newsimages && item.Newsimages != ''" class="itemIco" :style="'background: url('+ item.Newsimages +') center/cover no-repeat'"></div>
     										<div v-else class="itemIco" style="background: url(../../image/banner1.jpg) center/cover no-repeat"></div>
										 </div>
										 <div class="aui-list-item-inner">
												 <div class="aui-list-item-text">
														 <div class="aui-list-item-title" v-text="item.title"></div>
												 </div>
												 <div class="aui-info aui-margin-t-5" style="padding:0">
														 <div class="aui-info-item">{{item.updateTime | initTime}}</div>
												 </div>
										 </div>
								 </div>
						 </li>
						 <!-- <li class="aui-list-item last-item vedio">
	                <div class="aui-list-item-inner">
	                    <div class="aui-list-item-title">多张图片列表一</div>
	                    <div class="aui-row aui-row-padded">
	                        <div class="aui-col-xs-12 last-item_video">
			 											 <img src="../../image/firstpage/t4@3x.png">
														 <div class="mask">
														 		<div class="mask_mid">
						 											 <img src="../../image/bf1@3x.png">
														 		</div>
																<div class="mask_bot">
																	<div class="mask_left">
								 										<img src="../../image/bf2@3x.png">29.9万播放
																	</div>
																	<div class="mask_right">
																		02:33
																	</div>
																</div>
														 </div>
	                        </div>
	 											 <div class="aui-info aui-margin-t-5" style="padding:0">
	 													 <div class="aui-info-item">2015-07-14 10:31</div>
	 											 </div>
	                    </div>
	                </div>
	            </li> -->
				 </ul>
		 		</div>

			</div>


		</div>
		<div class="h20"></div>
	</div>
</div>
</section>
	</div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<!-- <script type="text/javascript" src="../../script/idangerous.swiper.js"></script> -->
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script>
	apiready = function() {
		var app = new Vue({
			el: '#app',
			data: {
				banner: [],
				newsList: [],
				page: 1,
				mySwiper: null
			},
			created: function() {
				var $_this = this;
				api.ajax({
				  url: window.Url.getLastesNews + $_this.page,
					timeout: 300,
				}, function(ret, err) {
				    if (ret) {
				        // api.alert({ msg: JSON.stringify(ret) });
								$_this.newsList = ret.data.newsList

								$_this.$nextTick(function() {
									$_this.mySwiper = new Swiper('#slider1',{
										autoplay: 3000,
										loop: true,
									})
								})
				    } else {
				        api.alert({ msg: JSON.stringify(err) });
				    }
				})
			},
			methods: {
				 openPage: function(type, title, id) {
					api.openWin({
						name: 'index_' + type,
						pageParam: {
							name: 'index_' + type,
							title: title,
							id: id
						},
						url: './index_'+ type + '.html',
						delay: 200,
						bounces: false
					});
				}
			},
			filters: {
			  initTime: function (value) {
			    if (!value) return ''
					value = new Date(value)
					var year = value.getFullYear()
					var mouth = value.getMonth()
					var day = value.getDate()
					var h = value.getHours()
					var m = value.getMinutes()
			    return year + '-' + mouth + '-' + day + ' ' + h + ':' + m
			  }
			},
			mounted:function() {
				var $_this = this;
				var pullRefresh = new auiPullToRefresh({
		        container: document.querySelector('.aui-refresh-content'),
		        triggerDistance: 100
		    },function(ret){
		        if(ret.status=="success"){
							api.ajax({
							  url: window.Url.home_banner,
								timeout: 300,

							}, function(ret, err) {
							    if (ret) {
							        // api.alert({ msg: JSON.stringify(ret) });
											$_this.banner = ret.data

											$_this.$nextTick(function() {
												$_this.mySwiper.reLoop()
			                $_this.mySwiper.updateSlidesSize()
			                $_this.mySwiper.updatePagination()
			                $_this.mySwiper.slideTo(1, 0, false)
											})
							    } else {
							        api.alert({ msg: JSON.stringify(err) });
							    }
							})
							api.ajax({
								url: window.Url.getLastesNews + $_this.page,
								timeout: 300,
							}, function(ret, err) {
									if (ret) {
											// api.alert({ msg: JSON.stringify(ret) });
											setTimeout(function() {
												$_this.newsList = ret.data.newsList
												pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
											},500)
									} else {
											api.alert({ msg: JSON.stringify(err) });
									}
							})

		        }
		    })
			}
		})
	}

	function openLogin() {
		api.openWin({
			name: 'login',
			url: '../forth_frame/login_header.html',
			bounces: false,
			delay: 200
		});
	}




	function openDetail (type, title) {
		api.openWin({
			name: 'index_detail_' + type,
			pageParam: {
				name: 'index_detail_' + type,
				title: title,
			},
			url: './first_header.html',
			delay: 200,
			bounces: false
		});
	}
	function openXS() {
		api.openWin({
			name: 'index_xs0',
			pageParam: {
				name: 'index_xs0'
			},
			url: './first_header_xs.html',
			delay: 200,
			bounces: false
		});
	}
	function openWX() {
		api.openWin({
			name: 'index_wx0',
			pageParam: {
				name: 'index_wx0'
			},
			url: './first_header_wx.html',
			delay: 200,
			bounces: false
		});
	}


	function openSJ() {
		api.openWin({
			name: 'index_sj0',
			pageParam: {
				name: 'index_sj0'
			},
			url: './first_header_sj.html',
			delay: 200,
			bounces: false
		});
	}
	function clickMore () {
		api.toast({ msg: '后续功能正在开发，敬请期待',duration: 2000,location:'middle' });
	}
</script>

</html>
